<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #ffffff;
        }
        .content{
            width: 680px;
            margin: 0 auto;
            background-color: #ffffff;
        }
        h1{
            color: #af4248;
            text-align: center;
        }
        input{
            width: 90%;
            height: 30px;
        }
        .add{
            width: 8%;
            height: 30px;
        }
        .list{

        }
    </style>
</head>
<body>
    <h1>记事本</h1>
    <div class="content">
        <input type="text">
        <button class="add">添加</button>
        <ul class="list">

        </ul>

    </div>
    <script>
        let list =[
        { name:'张三',date:'2025-11-02', text:'哈哈哈哈哈哈哈哈哈'},
        { name:'张三',date:'2025-11-02', text:'哈哈哈哈哈哈哈哈哈'}
    ]
    // 添加事件
    let input = document.querySelector('input')

    input.onkeyup=function(e){
        if (e.keyCode==13) {
            // 获取输入框的内容
            let text = this.value
            //插入到数组中
            // 准备一个对象
            let obj = {
                name:'张三',
                text:text,
                date:new Date().getTime()
            }
            list.push(obj)
            // 更新dom元素
            setdom()
        }
    }
    // 删除选中的数据
    function dellist(date) {
        let index = list.findIndex(function(item){
            return item.date ==date
        })
        // 删除数组中符合条件的项
        list.splice(index,1)
        // 更新dom元素
        setdom()

        
    }
    // 转换时间
    function setdate(time) {
        let date = new Date(time)
        let dates = date.toLocaleDateString()
        let tiems = date.toLocaleTimeString()
        // 转化成数组
        let datearr= dates.split('/')

        datearr[2]=datearr[2].padStart(2,'0')
        datearr[1]=datearr[1].padStart(2,'0')
        console.log(datearr.join('-'));
        
        return datearr.join('-')+'&nbsp;&nbsp;'+tiems
    }
    // 更新dom元素
    function setdom() {
    let ul = document.querySelector('ul')
    let li = ''
    for(let item of list){

        li+=`<li>${item.name}说:${item.text} ${item.date} <span onclick="dellist(${item.date})">X</span></li>`
    }
    ul.innerHTML = li
        }
        setdom()
    </script>
    
</body>
</html>